<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="/js/rem.js" type="text/javascript"></script>
    <title>发布</title>
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <link rel="stylesheet" href="/css/sign-up.css" type="text/css">
</head>
<body>
<div id="signup_main" class="active">
    <div class="content">
        <form method="post" action="" id="upload_video_form">
            <input type="hidden" th:value="${work_info.getACTIVITY_ID()}" name="activity_id">
            <input type="hidden" th:value="${work_info.getUSER_ID()}" name="user_id">
            <div class="workname">
                <label>作品名称</label>
                <input name="work_name" type="text" placeholder="请输入您的作品名称"/>
            </div>
            <div class="video1">
                <label>请上传封面</label>
                <input id="cover_img" type="file" class="video" name="work_imgfile" accept="image/*"/>
                <input id="cover_img_url" type="hidden" name="work_imgurl">
                <div class="video_button" id="video_button">
                    <span><img src="/img/add.png"><br>
                        <span>请选择PNG、JPEG、GIF等格式</span></span>
                </div>
                <span style="color: red;font-size: 0.8rem">上传文件不得超过100M！</span>
            </div>
            <div class="video1">
                <label>请上传音频文件</label>
                <input id="cover_audio_url" type="hidden" th:value="${work_info.getRESOURCE_URL()}" name="resource_url">
                <div class="audio_button" id="upload_audio">
                    <div class="audio_img">

                        <button type="button" class="play"></button>

                    </div>
                    <audio th:src="${work_info.getRESOURCE_URL()}" controls="controls" id="audio_work"></audio>
                </div>

            </div>
            <div class="workname">
                <label>作品描述</label>
                <input name="work_assessment" th:value="${work_info.getWORK_ASSESSMENT()}" type="text" placeholder="请输入您的作品描述"/>
            </div>
            <div class="sign_up">
                <button type="button" id="button_signup"><span ></span></button>
            </div>
            <input type="hidden" name="work_lenth" th:value="${work_info.getWORK_LENTH()}"/>
        </form>
    </div>
</div>
<script type="text/javascript" src="/js/zepto.js"></script>
<script type="text/javascript" src="/js/touch.js"></script>
<script type="text/javascript" src="/js/util.js"></script>

<script type="text/javascript">
    $(function () {
        var img =$("#cover_img_url").val();
        //console.log(img)
        if(img!=""){
            $("#video_button").css("background-image", "url(" + img + ")");
            $("#video_button>span").hide();
        }
    })
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }
    $("#cover_img").on("change", function (a, b) {
        if (this.files.length <= 0) return;
        //console.log(this.files[0]);

        var img = window.URL.createObjectURL(this.files[0]);
        //console.log(img)
        $("#video_button").css("background-image", "url(" + img + ")");
        $("#video_button>span").hide();

        //清空val
        $("#cover_img_url").val('');

    })

    function play() {
        var file = $('#cover_audio')[0].files[0];
        var url = window.URL.createObjectURL(file);
       // console.log(url);
        $("#audio_work").attr("src", url);
        //清空val
        $("#cover_audio_url").val('');

    }

    $("#button_signup").on("tap", function (evt) {
        var data = $("#upload_video_form").serializeObject();
        if (data.work_name == "") {
            alert("请填写作品名称！")
            return;
        }
        if (data.work_imgurl == "") {

            if ($("#cover_img")[0].files.length == 0) {
                alert("请为作品添加个封面")
                return;
            }
        }
        if (data.work_assessment.length>200) {
            alert('作品描述最多写入200个字符')
            return;
        }
        var formData = new FormData();
        formData.append("ACTIVITY_ID", data.activity_id);
        formData.append("USER_ID", data.user_id);
        formData.append("WORK_NAME", data.work_name);
        formData.append("WORK_IMGURL", data.work_imgurl);
        formData.append("WORK_ASSESSMENT", data.work_assessment);
        formData.append("RESOURCE_URL", data.resource_url);
        formData.append("WORK_LENTH", data.work_lenth);
        formData.append("file", $("#cover_img")[0].files[0]);
        $("#button_signup>span").addClass("loading");
        window.showLoading();
        $.ajax({
            type: "post",
            url: "/front/recorderWork",
            async: true,
            processData: false,
            contentType : false,
            data: formData,
            dataType: "json",
            success: function (res) {
                //console.log(res)
                if (res == "1") {
                    alert("提交成功")
                    //返回上一级
                    window.history.back();
                }
                else {
                     alert("服务器返回了错误的结果！")
                }
            },
            error: function (res) {
                alert("正在加载···")
            },
            complete:function () {
                $("#button_signup>span").removeClass("loading");
                window.closeLoading();
            }
        })
        return false;
    })
</script>
</body>
</html>